<template>
  <div>
    <el-card>
      <div style="display: flex; justify-content: space-between;">
        <el-statistic title="会员总数" :value="totalMembers" />
        <el-input v-model="searchQuery" placeholder="搜索会员..." style="width: 300px;" />
      </div>
    </el-card>
    <!-- 表格数据来源是后端查询的数据 -->
    <el-table :data="Members" style="width: 100%; margin-top: 20px;">
      <el-table-column prop="memberNum" label="会员号" />
      <el-table-column prop="memberName" label="姓名" />
      <el-table-column prop="memberSex" label="性别">
      </el-table-column>
      <el-table-column prop="phoneNum" label="电话" />
      <el-table-column prop="card" label="健身卡" />
      <el-table-column prop="huiji" label="会籍顾问" />
      <el-table-column label="操作">
        <!--  -->
        <template #default="scope">
          <!-- `scope.row`: 通过`@click="handleSC(scope.row)"`将当前行的数据对象传递给了`handleSC`函数.
          因此，在`handleSC`函数内部，`member`就是当前行的会员对象。 -->
          <el-button size="small" type="warning" @click="handleSC(scope.row)">课程报名</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 课程报名对话框 -->
    <el-dialog v-model="mcDialogVisible" title="课程报名">
      <!-- 编辑表单 -->
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
        
  <el-form-item label="会员号"> 
  <el-input v-model="memberInfo.memberNum" disabled/>
  </el-form-item>
          
       <el-form-item label="姓名"> 
    <el-input v-model="memberInfo.memberName" disabled/>
  </el-form-item>

     <el-form-item label="课程" prop="course"> 

    <el-select v-model="ruleForm.course" @click="loadOptions">
      <el-option @click="handleOption"
        v-for="item in courseOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </el-form-item>
  
      <el-form-item style="padding-left: 40%;">
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          确定
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">
          清空
        </el-button>
      </el-form-item>
    </el-form> 
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, reactive} from 'vue'
import axios from 'axios'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { errorMessages } from 'vue/compiler-sfc'

interface RuleForm {
  memberNum: string
  memberName: string
  courseNum: string
  course: string           
}

const ruleForm = reactive<RuleForm>({
  memberNum: '',
  memberName: '',
  courseNum: '',          
  course: ''       
})


// 更新表单规则
const rules = reactive<FormRules<RuleForm>>({
 
  course: [
    { required: true, message: '请选择课程', trigger: 'blur' }
  ],

})

// ruleFormRef用于引用表单实例FormInstance
const ruleFormRef = ref<FormInstance>()
// 提交表单
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  // 表单元素存在的判断
  await formEl.validate(async (valid) => {
    if (valid) {
        // 存在则创建传给后端的数据 保持与sql语句的字段一致  json型数据
        const mcData = {
          // 字段要保持一致与sql
          // 从页面数据memberInfo数组获取
          memberNum: memberInfo.value.memberNum,
          memberName: memberInfo.value.memberName,
          // 从页面数据courseNum获取  注意：页面数据courseNum是数组类型，需要通过下标来获取
          courseNum: courseNum,
          // 从表单数据course获取
          courseName: ruleForm.course,
        }
        console.log(mcData)
        try{
          // 将数据提交至后端接口
        await axios.post('/api/mc', mcData)
        console.log('办理成功!')
        ElMessage.success('报名成功!')
        // 重置表单
        formEl.resetFields()
        
        
      }catch(error){
        console.log(errorMessages)
      }
    }
  })
  }
// 重置表单函数
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  // formEl.resetFields()：Element Plus 提供的表单重置方法
  formEl.resetFields()
}

// 定义响应式数组数据members
const members = ref([])
// 响应数据搜索关键字
const searchQuery = ref('')
// 总会员数量 计算数组长度
const totalMembers = computed(() => members.value.length)
// 获取后端数据
const getAllMembers=(async () => {
    // 获取member表 /api/members是后端的相对地址
  const response = await axios.get('/api/members')
  members.value = response.data
})


const Members = computed(() => {
    // 如果搜索的关键字的值不为空 则返回搜到数组值
  if (!searchQuery.value) return members.value
//   
  return members.value.filter(member => 
    member.memberName.includes(searchQuery.value) || 
    member.phoneNum.includes(searchQuery.value))
})
// 挂载后端请求的数据
onMounted(()=>{

getAllMembers()
})

// 单个会员的响应数据
const memberInfo = ref({
  memberNum: '',
    memberName: ''
})
// 办理课程-自动将数据渲染到对应的输入框 结合scope实现 member参数表示当前选中行

// 课程报名是否可见 默认不可见
const mcDialogVisible = ref(false)
const handleSC = async (member) => {
  // 课程办理对话框弹出
  mcDialogVisible.value=true
  // 将获取到的单行数组字段值赋给用来渲染前端的会员信息的memberInfo
  try{
  memberInfo.value = {
        memberNum: member.memberNum,
        memberName: member.memberName,
  }
}catch(error){
    console.error('加载选项失败:', error);
  }
}

// 课程选项渲染
const courseOptions = ref([])
const loadOptions = async () => {
  try {
    // 请求后端 获取响应数据
    const courseRes = await axios.get('/api/courses')
    console.log(courseRes)
    
    // 将后端访问到的数据渲染到前端课程选项
    courseOptions.value = courseRes.data.map(course => ({
      label: course.courseName,  // 使用 cardName 作为显示文本
      value: course.courseName   // 使用 cardName 作为值
    }));
    
  } catch (error) {
    console.error('加载选项失败:', error);
    ElMessage.error('加载选项失败，请稍后重试');
  }
}
// 挂载 及时渲染到页面上 否则看不到数据 因为loadOptions没有绑定触发事件 所以使用挂载渲染出来 
// 或者在select组件上将函数添加为点击事件即可
// onMounted(() => {
//   loadOptions()
// })

//通过选择选项单击事件 来获取对应的课程号 以便提交表单是插入数据库 
// 先定义课程号的响应式常量 因为表单里没有使用课程号这个表单项 但是后端插入需要课程号
 var courseNum = ''
//  获取选项的课程号
const handleOption = async () => {
  try{
  // 获取表单的ruleForm.course的值作为后端接口的参数 去执行课程号查询
  const courseNumRes=await axios.get(`/api/courses/${ruleForm.course}`)
  console.log(courseNumRes.data)
  // 将获取到的后端数据赋值给courseNum 因为后端定义的查询结果是list 使用这里用[0]将具体内容读出 
  courseNum = courseNumRes.data[0]
  console.log(courseNum)
}catch(error){
    console.error('加载选项失败:', error);
  }
}

</script>